<template>
  <div class="Echarts">
    <div class="date-picker-container">
      <el-date-picker
        v-model="startTime"
        type="date"
        placeholder="选择日期起始时间"
        class="date-picker"
      >
      </el-date-picker>
      <el-date-picker
        v-model="endTime"
        type="date"
        class="date-picker"
        placeholder="选择日期结束时间"
      >
      </el-date-picker>
      <el-button
        icon="el-icon-search"
        circle="true"
        @click="initData"
      ></el-button>
    </div>
    <div id="main1" style="width: 95%; height: 400px"></div>
  </div>
</template>

<script>
import { GetDailyVisit } from '@/api/visit';

export default {
  name: 'websiteAnalysis',
  data () {
    return {
      xAxisData: [],
      seriesData: [],
      startTime: '',
      endTime: ''
    }
  },
  methods: {
    myEcharts (xAxisData, seriesData) {
      // 基于准备好的dom，初始化echarts实例
      var myChart = this.$echarts.init(document.getElementById('main1'));

      // 指定图表的配置项和数据
      var option = {
        xAxis: {
          type: 'category',
          data: xAxisData,
          axisTick: {
            alignWithLabel: true
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        color: ['#3398DB'],
        yAxis: {
          type: 'value'
        },
        series: [{
          data: seriesData,
          type: 'bar',
          barWidth: '40%',
          label: {
            formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
            backgroundColor: '#F6F8FC',
            borderColor: '#8C8D8E',
            borderWidth: 1,
            borderRadius: 4,

            rich: {
              a: {
                color: '#6E7079',
                lineHeight: 22,
                align: 'center'
              },
              hr: {
                borderColor: '#8C8D8E',
                width: '100%',
                borderWidth: 1,
                height: 0
              },
              b: {
                color: '#4C5058',
                fontSize: 14,
                fontWeight: 'bold',
                lineHeight: 33
              },
              per: {
                color: '#fff',
                backgroundColor: '#4C5058',
                padding: [3, 4],
                borderRadius: 4
              }
            }
          },

        }]
      };
      myChart.setOption(option);
    },
    initData () {
      GetDailyVisit(this.startTime, this.endTime).then((response) => {
        debugger;
        var data = response.data;
        var xAxisData = [];
        var seriesData = [];
        for (var i = 0; i < data.length; i++) {
          xAxisData.push(data[i].name);
          seriesData.push(data[i].value);
        }
        this.myEcharts(xAxisData, seriesData);
      });
    }


  },
  mounted () {
    this.initData();
  }
}
</script>

<style scoped>
.echarts {
  width: 100%;
  height: 100%;
}
.date-picker {
  margin-right: 30px;
}
.date-picker-container {
  margin-bottom: 50px;
}
</style>